<template>
  <el-dialog
    v-model="dialogVisiblesales"
    width="1000px"
    title="历史材料下单记录"
    overflow
    @close="handleClose"
  >
    <template #footer>
      <vxe-table
        border
        min-height="300"
        :row-config="{ keyField: 'id' }"
        :data="TableData"
        :radio-config="radioConfig"
        show-footer
        size="small"
        @radio-change="radioChangeEvent"
      >
        <vxe-column type="seq" title="序号" width="60" align="center" />
        <vxe-column
          field=""
          title="订单名称"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field=""
          title="订单状态"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field=""
          title="材料编号"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field=""
          title="材料名称"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
        <vxe-column
          field=""
          title="下单数量"
          show-header-overflow
          show-overflow="title"
          show-footer-overflow
        />
      </vxe-table>
      <vxe-pager
        v-model:current-page="tablePage.currentPage"
        v-model:page-size="tablePage.pageSize"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total'
        ]"
        :total="tablePage.total"
        size="small"
        @page-change="handlePageChange"
      />
      <div class="dialog-footer">
        <el-button type="primary" color="#1E3485" @click="go()">
          确认
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from "vue";
import { VxeTablePropTypes } from "vxe-table";
import { getSalesContractsList } from "@/api/ERP_sales";
import { Search, Upload, Delete } from "@element-plus/icons-vue";

const emit = defineEmits(["close", "confirm"]);

onMounted(async () => {
  getlist();
});
function handleClose() {
  emit("close", false);
}
const TableData = ref([]);
const radioConfig = reactive<VxeTablePropTypes.RadioConfig>({
  checkRowKey: ""
});
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});

//获取销售合同列表
const getlist = (query?: string) => {};

const dialogVisiblesales = ref(false);

// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});
// 表格分页事件
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};

watch(
  () => props.visible,
  val => {
    dialogVisiblesales.value = val;
  },
  { immediate: true }
);
const selectRow = ref(null);
//单击事件
const radioChangeEvent = ({ row }) => {
  selectRow.value = row;
};
function go() {
  emit("close", selectRow);
  dialogVisiblesales.value = false;
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
}
</style>
